<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="detailTitle" :visible.sync="drawer" @closed="closedinvitation" size="85%" :wrapperClosable="false">
      <div class="layout">
        <!-- <el-form label-position="left" :inline="true" size="small"> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="活动基本配置" name="first">
            <el-form ref="basic" label-position="left" :inline="true" :model="basic" size="small" :rules="basicrules">
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item label="活动名称" prop="award_name" class="form-box-item">
                  <el-input clearable maxlength="20" show-word-limit placeholder="请输入活动名称" v-model="basic.award_name">
                  </el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="basicTime" class="form-box-item">
                  <el-date-picker clearable value-format="yyyy-MM-dd" @change="basicTimeChange" v-model="basicTime"
                    type="daterange" range-separator="至" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="活动状态" prop="status" class="form-box-item">
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="basic_information('basic', 'second')" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="适用范围" name="second">
            <el-form label-position="left" :inline="true" :model="range" size="small" :rules="rangerules">
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" required class="form-box-item">
                  <el-cascader @change="regionChangeWay" v-model="region" style="width: 100%" :options="regionList"
                    collapse-tags :props="{
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: true,
                    }" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="用户分组" required class="form-box-item">
                  <el-select @change="selectChangeWay(grouping, 'user_group')" v-model="grouping" multiple clearable
                    collapse-tags placeholder="请选用户分组">
                    <el-option v-for="item in groupingList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" required class="form-box-item">
                  <el-select @change="selectChangeWay(grouping, 'user_level')" v-model="grade" multiple clearable
                    collapse-tags placeholder="请选用户等级">
                    <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" required class="form-box-item">
                  <el-select clearable @change="selectChangeWay(grouping, 'user_label')" style="width: 100%"
                    v-model="label" multiple collapse-tags placeholder="请选择标签">
                    <el-option-group v-for="group in TagCategoryAll" :key="group.category_name"
                      :label="group.category_name">
                      <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户身份" required class="form-box-item">
                  <el-select clearable @change="selectChangeWay(grouping, 'user_label')" style="width: 100%"
                    v-model="label" multiple collapse-tags placeholder="请选择身份">
                    <el-option-group v-for="group in TagCategoryAll" :key="group.category_name"
                      :label="group.category_name">
                      <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackList.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div class="table-top-right" v-if="CanJoinUserList.length > 0">
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('黑名单')" plain
                        size="small">配置黑名单</el-button>
                    </div>
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('重复对象')" plain
                        size="small">配置重复</el-button>
                    </div>
                  </div>
                </div>
                <div>
                  <el-table v-loading="rangeCanJoinUserLoading" highlight-current-row :data="CanJoinUserList"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }" style="width: 100%">
                    <el-table-column align="center" prop="id" label="用户id"></el-table-column>
                    <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                    <el-table-column align="center" prop="region" label="用户区域">
                      <template slot-scope="scope">
                        {{
                          scope.row.province_name
                          ? scope.row.province_name
                          : "-"
                        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="group" label="用户群组">
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip class="item" effect="dark" :content="scope.row.group_name" placement="top">
                          <div v-if="scope.row.group_name" style="display: flex; justify-content: center">
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="tag" label="用户标签">
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip class="item" effect="dark" :content="scope.row.tag_name.join('/')" placement="top">
                          <div v-if="scope.row.tag_name.length !== 0" style="display: flex; justify-content: center">
                            <div v-if="index < 3" v-for="(item, index) in scope.row.tag_name" :key="index">
                              {{ item }} /
                            </div>
                            <div v-if="scope.row.tag_name.length > 3" class="table-num">
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="参与活动状态"></el-table-column>
                    <el-table-column fixed="right" width="100" prop="address" label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack(scope.row)">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination v-show="rangeCanJoinUsertotal > 0" :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page" :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="gettable" />
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'first'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button @click="activeName = 'third'" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动规则" name="third">
            <el-alert style="margin-bottom: 20px" title="活动说明:" type="warning" :closable="false">
              返现类型分为按订单返现、按金额返现，用户消费超出平台设置的最高返现订单数/金额时，则超出部分不参与返现
            </el-alert>
            <el-form label-position="left" :inline="true" :model="basic" size="small" :rules="basicrules">
              <div class="blockquote-box">消费返现规则</div>
              <div class="form-box">

                <el-form-item label="返现类型" required class="form-box-item">
                  <el-radio-group v-model="eventsForm.product">
                    <el-radio label="按消费订单返现"></el-radio>
                    <el-radio label="按消费金额返现"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="最高返现" required class="numbox form-box-item">
                  <el-input-number v-model="eventsForm.totalPrizeRulesLimited" :min="1"></el-input-number>
                  单
                </el-form-item>

              </div>
              <div>
                <div class="blockquote-box">消费返现比例</div>
                <div class="form-box">
                  <el-form-item label="配置条件" required class="form-box-item">
                    <el-button type="primary" style="height: 30px" @click="addProductConfig('配置奖池商品')">配置指定商品</el-button>
                  </el-form-item>
                  <div>
                    <el-form-item label="默认返现比" required class="numbox form-box-item">
                      <div class="flex-box">
                        <div class="flexdiv-box">
                          第一天返
                          <el-input-number v-model="eventsForm.totalPrizeRulesLimited" :min="1"></el-input-number>
                          %
                        </div>
                        <div class="flexdiv-box">
                          第二天返
                          <el-input-number v-model="eventsForm.totalPrizeRulesLimited" :min="1"></el-input-number>
                          %
                        </div>
                        <div class="flexdiv-box">
                          第三天返
                          <el-input-number v-model="eventsForm.totalPrizeRulesLimited" :min="1"></el-input-number>
                          %
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'third'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button @click="activeName = 'fourth'" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动说明" name="fourth">
            <el-form label-position="left" :inline="true" :model="basic" size="small" :rules="basicrules">
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item label="活动简介" required class="form-box-item">
                  <el-input type="textarea" style="width:727px" :rows="5" placeholder="请输入内容" v-model="eventsForm.intro">
                  </el-input>
                </el-form-item>
                <el-form-item label="规则说明" required class="form-box-item">
                  <tinymce-editor v-model="eventsForm.content" width="100%" />
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'third'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button class="next-button">保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- </el-form> -->
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <config v-if="ifShowConfig" :data="data" :ConfigTitle="ConfigTitle" />
    <productConfig v-if="ifShowProductConfig" :productConfigTitle="productConfigTitle"></productConfig>
  </div>
</template>
<script>
// 引入
import config from "../demo/config";
import productConfig from "../demo/productConfig";
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
import { rangeCanJoinUserList, rangeHasJoinUserList } from "@/api/index";
// import Template from '../raffle/template.vue';
export default {
  name: "detail",
  props: ["detailTitle"],
  components: {
    config,
    productConfig,
    LogoUpload,
    TinymceEditor,
  },

  data() {
    return {
      drawer: true,
      detailtitle: "",
      activeName: "first",
      status: [
        { name: "过期", id: -1 },
        { name: "开启", id: 1 },
        { name: "进行中", id: 2 },
        { name: "关闭", id: 3 },
      ],
      regions: [
        { name: "全国", id: "-1" },
        { name: "武汉", id: "1" },
        { name: "北京", id: "2" },
        { name: "郑州", id: "3" },
      ],
      groupingList: [], // 分组
      TagCategoryAll: [], // 标签
      gradeList: [], // 等级
      regionList: [], // 区域
      CanJoinUserList: [], // 满足条件的可参与用户列表
      eventsForm: {
        award_name: "", // 抽奖活动名称
        time: "",
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        totalPrizeRulesLimited: "",
        extraTimes: [], //额外次数
        region: [], //生效区域
        product: "",
        turntable: "6",
        prizepool: "默认奖池",
        prizeturntable: "1",
        content: "",
        intro: '',
      },
      // 基本信息
      basic: {
        activity_name: "",
        award_name: "", // 抽奖活动名称
        start_time: "", // 开启时间
        end_time: "", // 结束时间
        status: 3, // 状态状态：-1过期 1开启 2进行中 3关闭
        user_lottery_num: 0, // 每人抽奖总次数 不填就是不限制
        user_days_lottery_num: 0, // 没人每天抽奖总次数 不填就是不限制
        is_use_cart_num: "", // 0不可使用会员卡赠送次数 >0可使用次数
        is_use_sign_num: "", // 0不可使用签到赠送次数 >0可使用次数
      },
      // 基本信息时间段
      basicTime: [],
      // 基本信息额外抽奖次数
      extraTimes: [],
      // 校验
      basicrules: {
        award_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        basicTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        user_lottery_num: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "" || value == 0) {
                return callback();
              }
              if (req.test(value)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_cart_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("签到渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外签到次数"));
                } else {
                  if (req.test(value)) {
                    callback(new Error("额外签到次数只能为数字,且只能为整数"));
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_sign_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("会员卡渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外会员卡次数"));
                } else {
                  if (req.test(value)) {
                    callback(
                      new Error("额外会员卡次数只能为数字,且只能为整数")
                    );
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 适用范围
      range: {
        user_area: "",
        user_group: "",
        user_label: "",
        user_level: "",
        user_black: "", // 黑名单用户id
      },
      // 省市区
      region: [],
      grouping: [],
      label: [],
      grade: [],
      // 校验
      rangerules: {},
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      }, //
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      joinblackList: [], // 黑名单列表
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      //   适用范围传递的数据
      dataListConfig: [],
      loading: false,
      tablevalue: {
        all_user: 0,
        disabled_user: 0,
        repeat_user: 0,
        page: 1,
        count: 10,
        total: 3,
        dataList: [
          {
            id: 1,
            name: "qqq",
            region: "北京",
            group: "中年",
            tag: "男",
            image: "",
            status: "已参加",
          },
        ],
        minprize: "",
        maxprize: "",
      },
      dataList1: [
        {
          id: 1,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 2,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 3,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
      ],
      ifShowConfig: false,
      ConfigTitle: "",
      ifShowProductConfig: false,
      productConfigTitle: "",
      dialogFormVisible: false,
      form: {
        name: "",
        image: "",
      },
      images: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      dialogtitle: "",
      image: '',
    };
  },
  mounted() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });
    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });
    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });
    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    const p5 = new Promise((resolve, reject) => {
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
        resolve();
      });
    });
    const p6 = new Promise((resolve, reject) => {
      rangeHasJoinUserList({ activity_type: 10001 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.HasJoinUserList = res.data.list;
        this.rangeHasJoinUserTotal = res.data.total;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4, p5, p6])
      .then(() => { })
      .catch(() => { });
  },
  methods: {
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
      return;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeName = activeName;
        } else {
          return false;
        }
      });
    },
    // 选择活动日期之后直接赋值
    basicTimeChange(val) {
      if (val.length !== 0) {
        this.basic.start_time = val[0];
        this.basic.end_time = val[1];
      } else {
        this.basic.start_time = "";
        this.basic.end_time = "";
      }
    },
    // 文本框聚焦执行
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    // 文本框失焦执行
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    // 下拉框选择调用
    selectChangeWay(val, name) {
      this.range[name] = val.toString();
      if (name == "user_group") {
        this.rangeCanJoinUserSearch.appoint_group_select = val.toString();
      } else if (name == "user_level") {
        this.rangeCanJoinUserSearch.appoint_level_select = val.toString();
      } else if (name == "user_label") {
        this.rangeCanJoinUserSearch.appoint_tag_select = val.toString();
      }

      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      console.log(JSON.stringify(val));
    },
    //tabs页面切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    //打开抽屉
    addConfig(title) {
      if (title == "黑名单") {
        this.dataListConfig = this.joinblackList;
      } else if (title == "重复对象") {
        this.dataListConfig = this.HasJoinUserList;
      }
      this.ConfigTitle = title;
      this.ifShowConfig = true;
    },
    addProductConfig(title) {
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    //关闭子抽屉
    closeConfig() {
      this.ifShowConfig = false;
      this.ifShowProductConfig = false;
    },
    gettable() {
      this.loading = true;
      this.tablevalue.dataList = this.dataList1;
      this.loading = false;
    },
    // 上传活动轮播的回调
    carouselBack(files) {
      this.images = files;
      var arr = [];
      this.images.forEach((item) => {
        arr.push(item.url);
      });
      this.form.image = arr.toString();
    },
    //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将该用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.joinblackList.push(row);
          var arr = [];
          this.joinblackList.forEach((item) => {
            arr.push(item.id);
          });
          this.rangeCanJoinUserSearch.user_black = arr.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => { });
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {

  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }

  .numbox {
    .el-input {
      width: 130px;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;
      line-height: 30px;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }

  .placard-box {
    .placard-title {
      font-size: 14px;
      color: #4893FF;
      width: 200px;
      text-align: center;
      margin-bottom: 10px;
    }

    .placard-tip {
      margin-top: 10px;
      width: 350px;
      color: #6C6C6C;
      line-height: 20px;
      font-size: 12px;
    }
  }
  .flex-box{
    display: flex;
    .flexdiv-box{
      margin-right:20px;
    }
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }

}

.Instructions-important {
  color: #ee3737;
  font-weight: bold;
}
</style>